<!-- Created by duwanfu on 2018/10/24 -->
<template>
    <div class="wraper">
      <!--<form action="" target="frameFile">
        <mt-search
          autofocus
          v-model="value"
          cancel-text="取消"
          placeholder="搜索订单编号、下单人姓名、机构名称"
          @keyup.enter.native="search"
        >
        </mt-search>
      </form>-->
      <loadmore :height="height" @loadBottom="loadBottom" @loadTop="loadTop" ref="loadmores">
        <div class="content" v-for="(item, index) in list" :key="index">
          <div class="title">
            <span class="content-title">{{item.bankCode}}</span><span class="fr">{{item.id}}</span><span class="fr">订单号:</span>
          </div>
          <div class="indent-list">
            <p><span class="sp-left">申请时间：</span><span class="sp-right">{{item.createTime}}</span></p>
            <p><span class="sp-left">姓名：</span><span class="sp-right">{{item.realName}}</span></p>
            <p><span class="sp-left">手机号：</span><span class="sp-right">{{item.mobile}}</span></p>
            <p><span class="sp-left">订单状态：</span><span class="sp-right">{{item.status}}</span></p>
            <!--<div class="progress">进度查询</div>-->
          </div>
        </div>
        <div class="loadmore-bottom" v-if="!this.loader">已经到底啦~</div>
        <!--{{token}}-->
        <!--{{res}}-->
      </loadmore>
      <div class="no-data" v-if="list.length === 0">暂无数据~</div>
    </div>
</template>

<script>
  import { browserMixin } from '../../assets/js/mixin'
  export default {
    name: "indent",
    mixins: [browserMixin],
    data() {
      return {
        height: 'calc(100vh - 1rem)',

        pageNum: 1,//页码
        loader: true,
        list: [],//数据
        allLoaded: false,//数据是否加载完毕
        bottomStatus: '',//底部上拉加载状态
        wrapperHeight: 0,//容器高度
        topStatus: '',//顶部下拉加载状态
        translate: 0,//
        moveTranslate: 0,

        examplename: 'Search',
        value: '',
        res: ''
      }
    },
    created() {
      let params = {
        pageSize: 10,
        pageNum: 1,
        param: ''
      }
      this.getOrderList(params)
    },
    methods: {
      search() {
        // let params = {
        //   pageSize: 10,
        //   pageNum: 1,
        //   userId: ''
        // }
        // this.$http.getCardOrderList(params).then(res=> {
        //
        // }).catch(err=> {
        //
        // })
      },
      getOrderList(params) {
        let pageNum = this.pageNum;
        if (!this.loader) return;
        this.$http.getCardOrderList(params).then(res=> {
          this.res = JSON.stringify(res)
          if (res.message == '成功') {
            let data = res.data,
              lister = data.rows,
              list = this.list,
              l = lister.length;
            if (pageNum > 1) {
              list = [...list, ...lister];
            } else {
              list = lister;
            }
            this.list = list;
            if (l < 10) {
              this.loader = false;
            } else {
              this.pageNum = (pageNum + 1);
              this.loader = true;
            }
          }
        })
      },
      loadBottom() {
        this.$refs.loadmores.onBottomLoaded();
        if (!this.loader) return;
        let params = {
          pageSize: 10,
          pageNum: this.pageNum,
          param: ''
        }
        this.getOrderList(params);
      },
      loadTop() {
        this.loader = true;
        this.pageNum = 1;
        this.$refs.loadmores.onTopLoaded();
        let params = {
          pageNum: this.pageNum,
          pageSize: 10,
          param: ''
        }
        this.getOrderList(params)
      }
    }
  }
</script>

<style lang="scss" scoped>
  .wraper{
    position: relative;
    min-height: calc(100vh - 1rem);
    background: #f1f0ee;
    padding-bottom: 1rem;
    /deep/ .mint-search {
      height: auto;
    }
    .no-data {
      position: absolute;
      top: 0;
      width: 100%;
      height: calc(100vh - 1rem);
      line-height: calc(100vh - 1rem);
      text-align: center;
    }
    .loadmore-bottom {
      text-align: center;
    }
    .content {
      width: 100%;
      box-sizing: border-box;
      background: #f8f8f4;
      padding: 0 .3rem;
      margin-bottom: .2rem;
      box-shadow: 0 0 10px rgba(0, 0, 0, .1);
      .title {
        font-size: .3rem;
        height: .8rem;
        line-height: .8rem;
        border-bottom: 1px solid #eee;
        .content-title {
          padding-left: .2rem;
          font-weight: bold;
          background: url("../../assets/imgs/icon-title.png") no-repeat left center;
          background-size: .06rem .28rem;
        }
        span:not(.content-title) {
          color: #999;
          font-size: .24rem;
        }
      }
      .indent-list {
        position: relative;
        padding: .2rem;
        p {
          font-size: .24rem;
          line-height: .4rem;
          .sp-left {
            display: block;
            float: left;
            width: 1.7rem;
            color: #999;
          }
          .sp-right {
            color: #333;
          }
        }
        .progress {
          position: absolute;
          top: 50%;
          right: .4rem;
          width: 1.42rem;
          height: .46rem;
          text-align: center;
          line-height: .46rem;
          border: 1px solid #dd001b;
          color: #dd001b;
          border-radius: .1rem;
          transform: translateY(-50%);
        }
      }
    }
  }
</style>
